<template>
	<view class="bind-account">
		<view class="before-bg"></view>
		<view class="after-bg">
			<view class="bind-account-remind bind-account-common flex col-center">
				<view class="remind-icon"><image src="/static/images/third/icon_tishi@3x.png" /></view>
				<view class="remind-text">完善以下信息，实现佣金快速到账</view>
			</view>
			<view class="bind-account-Info bind-account-common">
				<view class="flex col-center">
					<view class="remind-icon wid-20"><image src="/static/images/third/icon_information_tiktok@3x.png" /></view>
					<view class="remind-title">抖音账号信息</view>
					<view class="remind-blue" @click="toGuide">如何获取链接？</view>
				</view>
				<!-- (!getDyInfo.dyUrl && !isResetGet) || isResetGet -->
				<textarea
					type="textarea"
					v-if="isResetGet"
					class="textarea-box"
					placeholder="请输入抖音链接"
					placeholder-class="placeholder"
					v-model="getDyInfo.dyUrl"
				/>
				<view class="result-info" v-else>
					<view class="common-item flex col-start border-bottom">
						<view class="common-item-title">抖音链接</view>
						<view class="common-item-content">{{ getDyInfo.dyUrl || '' }}</view>
					</view>
					<view class="common-item flex col-center border-bottom">
						<view class="common-item-title">抖音昵称</view>
						<view class="common-item-content">{{ getDyInfo.nickName || '' }}</view>
					</view>
					<view class="common-item flex col-center border-bottom">
						<view class="common-item-title">抖音账号</view>
						<view class="common-item-content">{{ getDyInfo.channelAccount || '' }}</view>
					</view>
					<view class="common-item flex col-center border-bottom">
						<view class="common-item-title">粉丝数</view>
						<view class="common-item-content">{{ getDyInfo.channelFens || 0 }}</view>
					</view>
				</view>
				<button :disabled="isLoading" v-if="isResetGet" :loading="isLoading" @click="getDouYinInfo" :class="{ active: isLoading }">
					获取账号
				</button>
				<button v-else @click="resetLink">重新获取</button>
			</view>
			<view class="bind-account-grade bind-account-common">
				<view class="flex col-center">
					<view class="remind-icon wid-20"><image src="/static/images/third/icon_information_group@3x.png" /></view>
					<view class="remind-title">团购信息</view>
				</view>
				<view class="">
					<view class="common-item flex row-between col-center border-bottom">
						<view class="common-item-title color-333">带货等级</view>
						<view class="common-item-content">
							<input
								type="text"
								v-model="getDyInfo.cargoLevel"
								@click="showSelectGrade()"
								:disabled="true"
								placeholder="请选择带货等级"
								class="font-bold"
								placeholder-class="font-400"
							/>
						</view>
					</view>
					<view class="common-item flex row-between col-center border-bottom">
						<view class="common-item-title color-333">带货分</view>
						<view class="common-item-content">
							<input
								type="number"
								class="font-bold"
								name=""
								placeholder-class="font-400"
								v-model="getDyInfo.cargoPoints"
								placeholder="请输入带货分"
							/>
						</view>
					</view>
					<view class="common-item flex row-between col-start">
						<view class="common-item-title color-333">团购等级截图</view>
						<view style="text-align: right">
							<view class="toGetGrade" @click="toGrade">如何获取等级截图？</view>
							<view @click="uploadFn" class="image-box">
								<view class="close-icon" @click.stop="delGradeImage" v-if="gradeScreenImage">
									<image src="/static/images/third/icon_information_delete@2x.png" />
								</view>
								<view class="upload-image" v-if="!gradeScreenImage">+</view>
								<image v-else :src="gradeScreenImage" class="upload-image solid-line" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bind-account-action" @click="submitBinding"><view class="btn">提交</view></view>
		</view>

		<BottomActionSheet v-model="isPopup" title="请选择带货等级" :list="gradeList" @changeBottomActionSheet="changeBottomActionSheet" />
		<!-- :activeValue="activeValue" -->
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';
import { getBytedance } from '@/api/login';
import { dyAccountEdit, dyAccountItem } from '@/api/third';
import EncapsulationUpload from '@/plugIn/upload';
import BottomActionSheet from '@/components/bottomActionSheet';
const g = function (item = {}) {
	return {
		cargoLevel: item.cargoLevel || '',
		cargoPoints: item.cargoPoints || '',
		channelAccount: item.channelAccount || '',
		channelFens: item.channelFens || 0,
		dyPortrait: item.dyPortrait || '',
		dyUrl: item.dyUrl || '',
		groupBuyRangeImg: item.groupBuyRangeImg || '',
		id: item.id || '',
		nickName: item.nickName || ''
	};
};
export default {
	name: 'bindAccount',
	computed: {
		currentAvatarInfo() {
			const { uploadStatusFileList } = this;
			return uploadStatusFileList.find((item) => item.type === 'image')?.list?.[0] || {};
		},
		gradeScreenImage() {
			const { groupBuyRangeImg = '' } = this.getDyInfo || {};
			return this.currentAvatarInfo.tempFilePath || groupBuyRangeImg || '';
		},
		// true 显示textarea false 显示明细
		isResetGet() {
			const { dyUrl = '' } = this.getDyInfo || {};
			const { isClickReset } = this;
			if (!dyUrl) {
				if (!isClickReset) {
					return false;
				} else {
					return true;
				}
			} else {
				if (!isClickReset) {
					return false;
				} else {
					return true;
				}
			}
		}
	},
	watch: {
		uploadStatusFileList: {
			deep: true,
			handler(params) {
				const {
					gradeScreenImage = '',
					upload: { ALYOSSConfig },
					currentAvatarInfo
				} = this;
				const { EndPoint, originalPath } = ALYOSSConfig;
				if (!params.length) {
					return;
				}
				const { status, tempFilePath } = this.currentAvatarInfo || {};
				if (status === 'wait' || status === 'upload') {
					uni.showLoading({
						title: '上传中…'
					});
				}
				if (status === 'success') {
					console.log('success');
					const getUploadImage = `${EndPoint}/${originalPath}${currentAvatarInfo.name}`;
					this.getDyInfo.groupBuyRangeImg = getUploadImage;
					uni.hideLoading();
					return;
				}
				if (tempFilePath === gradeScreenImage) {
					return;
				}
				this.gradeScreenImage = tempFilePath;
			}
		}
	},
	data() {
		return {
			dyLink: '',
			isLoading: false, // 获取账号提交loading
			isClickReset: false, // 是否点击重新获取
			judgeDyUrl: '',
			getDyInfo: g({}), // 获取抖音账号返回值
			uploadStatusFileList: [],
			gradeList: [
				{ label: 1, key: 1 },
				{ label: 2, key: 2 },
				{ label: 3, key: 3 },
				{ label: 4, key: 4 },
				{ label: 5, key: 5 },
				{ label: 6, key: 6 }
			],
			isPopup: false,
			activeValue: [{ label: '2级', key: '2级' }]
		};
	},
	components: { BottomActionSheet },
	onLoad(options = {}) {
		const { aUserId = '', id = '' } = options;
		this.getAccountItem(id);
		this.initUpload();
	},
	methods: {
		toGuide() {
			const imgUrl = `${defaultImageUrl}image/img_dylj.png`;
			const url = `/authorizePage/TikTockLinkGuidance?imgUrl=${imgUrl}`;
			uni.navigateTo({
				url
			});
		},
		toGrade() {
			const imgUrl = 'https://oss.lianlianlvyou.com/mp-dyfx/avatar/original/LL_IMAGE_d7e65117713f4960ade9a9078f88b0a8.png';
			const url = `/authorizePage/TikTockLinkGuidance?imgUrl=${imgUrl}`;
			uni.navigateTo({
				url
			});
		},
		getAccountItem(param = '') {
			dyAccountItem(param).then((res = {}) => {
				const { data = {} } = res;
				this.getDyInfo = g(data);
				this.judgeDyUrl = this.getDyInfo.dyUrl;
				if (Object.keys(data) && !data.dyUrl) {
					this.isClickReset = true;
				}
			});
		},
		// 提交绑定
		submitBinding() {
			console.log(this.currentAvatarInfo);
			const { toastFn, getDyInfo = {} } = this;

			const { cargoLevel = '', cargoPoints = '', dyUrl = '', groupBuyRangeImg = '' } = getDyInfo || {};
			console.log(this.currentAvatarInfo, getDyInfo);

			console.log(this.getDyInfo.groupBuyRangeImg);
			const reg = /^[0-9]*$/;
			if (!dyUrl) {
				toastFn('请输入抖音链接获取信息');
				return;
			}
			if (!cargoLevel) {
				toastFn('请选择带货等级');
				return;
			}
			if (!cargoPoints) {
				toastFn('请输入带货分');
				return;
			}
			if (!reg.test(cargoPoints)) {
				toastFn('带货分请输入正整数');
				return;
			}
			if (!groupBuyRangeImg) {
				toastFn('请上传等级凭证');
				return;
			}
			dyAccountEdit(getDyInfo)
				.then((res = {}) => {
					console.log(res);
					const { code = '' } = res || {};

					if (code === 200) {
						toastFn('更新成功');
						const url = `/thirdManage/dyAccount`;
						setTimeout(() => {
							uni.reLaunch({
								url
							});
						}, 400);
					} else {
						toastFn('更新失败');
						return;
					}
				})
				.catch((err = {}) => {
					const { message = '', data = {} } = err || {};
					const { msg = '' } = data || {};
					console.log(err);
					if (message) {
						toastFn(message || '网络错误');
					} else if (msg) {
						toastFn(msg || '网络错误');
					} else {
						toastFn('网络错误');
					}
				});
			// this.currentAvatarInfo 头像
		},
		// 重新输入账号
		resetLink() {
			this.getDyInfo.dyUrl = '';
			this.isClickReset = true;
		},
		// 上传
		uploadFn() {
			uni.hideKeyboard();
			this.upload.openPhotoAlbum();
		},
		toastFn(title = '') {
			uni.showToast({
				title: title,
				icon: 'none'
			});
		},
		initUpload() {
			this.upload = new EncapsulationUpload({
				that: this,
				isReplace: true,
				autoupload: true,
				statusNumber: {
					maxImage: 1
				},
				requestParams: {
					type: 1
				}
			});
		},
		delGradeImage() {
			this.uploadStatusFileList = [];
			this.gradeScreenImage = '';
			this.$set(this.getDyInfo, 'groupBuyRangeImg', '');
			console.log(this.gradeScreenImage);
		},
		// 选择带货等级
		showSelectGrade() {
			uni.hideKeyboard();
			this.isPopup = true;
		},
		changeBottomActionSheet(value) {
			const { key = '' } = value[0] || {};
			console.log(value, key);
			this.$set(this.getDyInfo, 'cargoLevel', key);
		},
		getDouYinInfo() {
			const { dyUrl = '' } = this.getDyInfo || {};
			if (!dyUrl) {
				uni.showToast({
					title: '请输入抖音链接',
					icon: 'none'
				});
				return;
			}
			this.isLoading = true;
			getBytedance({ surl: dyUrl })
				.then((res) => {
					const { data, code } = res;

					if (code !== 200) {
						return;
					}

					if (!data) {
						uni.showToast({
							mask: true,
							icon: 'none',
							title: '未找到对应抖音用户信息，请重试或检查链接是否正确'
						});
						return;
					}
					const { nickName, byteDanceId, followerCount } = data;
					this.getDyInfo = Object.assign(this.getDyInfo, { nickName, channelAccount: byteDanceId, channelFens: followerCount });
					this.isClickReset = false;
				})
				.finally((e) => {
					this.isLoading = false;
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.bind-account {
	width: 100%;
	// height: calc(100vh - 120rpx);
	min-height: 100vh;
	overflow-y: scroll;
	background: #f6f6f6;
	position: relative;
	// padding: 20rpx;
	@include Db_iosBottomDistance(120rpx);
	&-common {
		width: 100%;
		padding: 20rpx 28rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		.remind-icon {
			flex-shrink: 1;
			width: 52rpx;
			height: 52rpx;
			margin-right: 16rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.remind-title {
			font-size: 16px;
			font-weight: bold;
			color: #333333;
		}
	}
	.common-item {
		padding: 30rpx 0;
		background: #ffffff;
		&-title {
			font-size: 13px;
			color: #666666;
			width: 168rpx;
		}
		&-content {
			font-size: 14px;
			color: #333333;
			width: calc(100% - 170rpx);
			input {
				width: 100%;
				text-align: right;
			}
		}
	}
	.border-bottom {
		border-bottom: 1px solid #f6f6f6;
	}
	.wid-20 {
		width: 40rpx;
		height: 40rpx;
	}
	&-remind {
		z-index: 3;
		margin-bottom: 20rpx;
		.remind-text {
			width: calc(100% - 68rpx);
			font-size: 12px;
			color: #333333;
		}
	}
	&-Info {
		position: relative;
		.remind-blue {
			position: absolute;
			right: 20rpx;
			top: 28rpx;
			font-size: 12px;
			color: #1d6fe9;
		}
		.textarea-box {
			width: 100%;
			height: 240rpx;
			overflow-y: scroll;
			background: #f6f6f6;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-top: 20rpx;
			font-size: 14px;
		}
		.result-info {
			padding: 20rpx 0 0;
		}
		button {
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #ffffff;
			border-radius: 32rpx;
			border: 1px solid #ff6b11;
			text-align: center;
			font-size: 14px;
			color: #ff6b11;
			margin: 20rpx 0 0 calc(100% - 200rpx);
			&::after {
				display: none;
			}
		}
	}
	&-grade {
		.upload-image {
			width: 120rpx;
			height: 120rpx;
			background: #ffffff;
			border-radius: 4px;
			border: 1px dotted #cccccc;
			font-size: 35px;
			color: #cccccc;
			text-align: center;
			line-height: 105rpx;
			font-weight: 200;
		}
		.solid-line {
			border: 1px solid #cccccc;
		}
		.common-item-content {
			font-weight: 400;
		}
		.image-box {
			position: relative;
			display: inline-block;
			.close-icon {
				position: absolute;
				left: -16rpx;
				top: -16rpx;
				width: 32rpx;
				height: 32rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	&-action {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #ffffff;
		padding: 16rpx 28rpx;
		box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.14);
		@include Db_iosBottomDistance(10rpx);
		z-index: 9999;
		// cursor: pointer;
		.btn {
			background: #ff6b11;
			border-radius: 24rpx;
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			color: #ffffff;
		}
	}
}
.before-bg {
	width: 100%;
	height: 200rpx;
	left: 0;
	background: linear-gradient(180deg, #fff7f2 0%, #f6f6f6 100%);
	z-index: 1;
}
.after-bg {
	margin-top: -200rpx;
	padding: 20rpx;
	// position: relative;
}
.color-333 {
	color: #333333;
}
.font-bold {
	font-weight: bold;
}
.toGetGrade {
	font-size: 24rpx;
	color: #ff6b11;
	margin-bottom: 16rpx;
	margin-right: -6rpx;
}
/deep/ .font-400 {
	font-weight: 400;
}
</style>
